<template>
    <div>
        <h3>
            <!-- 在view层使用的时候会自动解包 -->
            响应式数据:{{age}} <button @click="age++">addAge</button>
            <br/>
            {{user.username}} {{user.money}} <button @click="user.money='两个亿'">addMoney</button>
            <button @click="changeUser">changeUser</button>
            <button @click="addMoney">addMoney</button>
        </h3>
    </div>
</template>

<script>
// 声明响应式数据  ref reactive
// 方法 computed watch  props emit怎么提交??
// 函数式 编程. 方便功能拆分. 一般在拆分出来独立的功能模块 useXxxxHook
// 主要提升了 vue的性能. 降低了项目打包之后的体积.
// 因为之前如果用 options API 组件，会把vue的核心功能全部打包.
// 而用了composition Api以后. 想要上面接口 就引入什么接口，如果没有用到的vue api那么不会打包进去.
// 降低了打包之后的体积.
    import { computed } from '@vue/reactivity';
import {ref,reactive,onBeforeMount,onMounted,onUnmounted,onUpdated} from 'vue'
    import {user,changeUser,addMoney} from './useUser.js'
    export default {
        // props:[],
        // data(){ return {}},
        // methods:{},
        // beforeCreate(){
        //     console.log("beforeCreate==>")
        // },
        // created(){},
        //setup就是组合式API代码书写位置 setup函数 比生命周期更早执行 里面没有this.
        // 函数式编程........面向对象编程
        setup(props,context){
           ////////////////////a
            let a=ref(10);
            let changeA=()=>{
                a.value=100;
            }
            let coma=computed(()=>{});
            

            /////////bbbbbbbbb
            let b=ref(20);
            let changeB=()=>{
                b.value=500;
            }
            let comb=computed(()=>{})
           
            

            let changeC=()=>{
                return a.value+b.value
            }
            //props.xxx context.emit() context.slots context.attrs context.nextTick没有。。。
            // console.log("setup===>",this);//undefined
            // console.log(context);
            //声明响应式数据,使用ref定义的响应式数据 需要解包.
            let age=ref(10);//一般用ref声明简单数据类型
            console.log(age.value);//获取ref定义的响应式数据. 取值或赋值的时候 需要解包.

            //声明引用响应式数据 用reactive 包装成 Proxy 使用的时候不用解包.
            let movie=reactive({
                name:"《无间道》",
                actor:["刘德华","梁朝伟"]
            });
            // console.log("movie===>",movie)
            console.log("===>",movie.name,movie.actor[1]);//不需要解包

            
            

            ///////////Composition Api的生命周期? 没有create 阶段。因为setup比create更早执行
            // onBeforeMount() onMounted(){} onBeforeUpdate(){} onUpdated(){} 
            //onBeforeUnmount(){} onUnMounted(){}
            /// 思考为 ref  reactive两种声明 响应式数据?? 基础数据类型 没有Proxy Proxy主要是用来代理对象.
            return {
                age,
                user,changeUser,addMoney
            }
        }
    }
</script>

<style lang="scss" scoped>

</style>